// 新建报表和新建仪表板
import React from 'react';
import NewReportModal from 'src/pages/AnalyseManage/Components/NewReportModal';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { encryptParam } from 'src/libs/paramsEncrypt';

interface NewReportProps {
	name: string;
	title: string;
	pageType: string;	//页面类型：report:报表   dashboard:仪表板
}

class NewReport extends React.PureComponent<RouteComponentProps & NewReportProps> {
	state: any = {
		modalVisible: false,
	};
	onSuccess = ( id: string ) => {
		this.setState( { modalVisible: false } );
		this.props.history.push( { pathname: `/analyseManage/editReport/${encryptParam( id )}/${encryptParam( 'true' )}/${encryptParam( 'EDIT' )}` } );
	};
	onCancel = () => {
		this.setState( { modalVisible: false } );
	};

	showReportHandle = () => {
		this.setState( { modalVisible: true } );
	};

	componentDidMount(): void {
		console.log( this.props.pageType );
	}

	render() {
		const { title } = this.props;
		return (
			<>
				<span onClick={ this.showReportHandle }>{ title }</span>
				{/* 新建报表弹窗 */ }
				<NewReportModal
					modalVisible={ this.state.modalVisible }
					name={this.props.name}
					pageType={ this.props.pageType }
					onSuccess={ ( id ) => this.onSuccess( id ) }
					onCancel={ () => {
						this.onCancel();
					} }
				></NewReportModal>
			</>
		);
	}
}

export default withRouter( NewReport );
